
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript customizations in the admin &#8212; Django 1.11.22.dev20190603194737 documentation</title>
    <link rel="stylesheet" href="../../../_static/default.css" type="text/css" />
    <link rel="stylesheet" href="../../../_static/pygments.css" type="text/css" />
    <script type="text/javascript" id="documentation_options" data-url_root="../../../" src="../../../_static/documentation_options.js"></script>
    <script type="text/javascript" src="../../../_static/jquery.js"></script>
    <script type="text/javascript" src="../../../_static/underscore.js"></script>
    <script type="text/javascript" src="../../../_static/doctools.js"></script>
    <script type="text/javascript" src="../../../_static/language_data.js"></script>
    <link rel="index" title="Index" href="../../../genindex.html" />
    <link rel="search" title="Search" href="../../../search.html" />
    <link rel="next" title="django.contrib.auth" href="../auth.html" />
    <link rel="prev" title="The Django admin documentation generator" href="admindocs.html" />



 
<script type="text/javascript" src="../../../templatebuiltins.js"></script>
<script type="text/javascript">
(function($) {
    if (!django_template_builtins) {
       // templatebuiltins.js missing, do nothing.
       return;
    }
    $(document).ready(function() {
        // Hyperlink Django template tags and filters
        var base = "../../templates/builtins.html";
        if (base == "#") {
            // Special case for builtins.html itself
            base = "";
        }
        // Tags are keywords, class '.k'
        $("div.highlight\\-html\\+django span.k").each(function(i, elem) {
             var tagname = $(elem).text();
             if ($.inArray(tagname, django_template_builtins.ttags) != -1) {
                 var fragment = tagname.replace(/_/, '-');
                 $(elem).html("<a href='" + base + "#" + fragment + "'>" + tagname + "</a>");
             }
        });
        // Filters are functions, class '.nf'
        $("div.highlight\\-html\\+django span.nf").each(function(i, elem) {
             var filtername = $(elem).text();
             if ($.inArray(filtername, django_template_builtins.tfilters) != -1) {
                 var fragment = filtername.replace(/_/, '-');
                 $(elem).html("<a href='" + base + "#" + fragment + "'>" + filtername + "</a>");
             }
        });
    });
})(jQuery);
</script>


  </head><body>

    <div class="document">
  <div id="custom-doc" class="yui-t6">
    <div id="hd">
      <h1><a href="../../../index.html">Django 1.11.22.dev20190603194737 documentation</a></h1>
      <div id="global-nav">
        <a title="Home page" href="../../../index.html">Home</a>  |
        <a title="Table of contents" href="../../../contents.html">Table of contents</a>  |
        <a title="Global index" href="../../../genindex.html">Index</a>  |
        <a title="Module index" href="../../../py-modindex.html">Modules</a>
      </div>
      <div class="nav">
    &laquo; <a href="admindocs.html" title="The Django admin documentation generator">previous</a>
     |
    <a href="../../index.html" title="API Reference" accesskey="U">up</a>
   |
    <a href="../auth.html" title="&lt;code class=&#34;docutils literal notranslate&#34;&gt;&lt;span class=&#34;pre&#34;&gt;django.contrib.auth&lt;/span&gt;&lt;/code&gt;">next</a> &raquo;</div>
    </div>

    <div id="bd">
      <div id="yui-main">
        <div class="yui-b">
          <div class="yui-g" id="ref-contrib-admin-javascript">
            
  <div class="section" id="s-javascript-customizations-in-the-admin">
<span id="javascript-customizations-in-the-admin"></span><h1>JavaScript customizations in the admin<a class="headerlink" href="#javascript-customizations-in-the-admin" title="Permalink to this headline">¶</a></h1>
<div class="section" id="s-inline-form-events">
<span id="s-admin-javascript-inline-form-events"></span><span id="inline-form-events"></span><span id="admin-javascript-inline-form-events"></span><h2>Inline form events<a class="headerlink" href="#inline-form-events" title="Permalink to this headline">¶</a></h2>
<p>You may want to execute some JavaScript when an inline form is added or removed
in the admin change form. The <code class="docutils literal notranslate"><span class="pre">formset:added</span></code> and <code class="docutils literal notranslate"><span class="pre">formset:removed</span></code> jQuery
events allow this. The event handler is passed three arguments:</p>
<ul class="simple">
<li><code class="docutils literal notranslate"><span class="pre">event</span></code> is the <code class="docutils literal notranslate"><span class="pre">jQuery</span></code> event.</li>
<li><code class="docutils literal notranslate"><span class="pre">$row</span></code> is the newly added (or removed) row.</li>
<li><code class="docutils literal notranslate"><span class="pre">formsetName</span></code> is the formset the row belongs to.</li>
</ul>
<p>The event is fired using the <a class="reference internal" href="index.html#contrib-admin-jquery"><span class="std std-ref">django.jQuery namespace</span></a>.</p>
<p>In your custom <code class="docutils literal notranslate"><span class="pre">change_form.html</span></code> template, extend the
<code class="docutils literal notranslate"><span class="pre">admin_change_form_document_ready</span></code> block and add the event listener code:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">extends</span> <span class="s1">&#39;admin/change_form.html&#39;</span> <span class="cp">%}</span>
<span class="cp">{%</span> <span class="k">load</span> <span class="nv">static</span> <span class="cp">%}</span>

<span class="cp">{%</span> <span class="k">block</span> <span class="nv">admin_change_form_document_ready</span> <span class="cp">%}</span>
<span class="cp">{{</span> <span class="nb">block</span><span class="nv">.super</span> <span class="cp">}}</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">{%</span> <span class="k">static</span> <span class="s1">&#39;app/formset_handlers.js&#39;</span> <span class="cp">%}</span><span class="s">&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
</pre></div>
</div>
<div class="highlight-javascript snippet"><div class="snippet-filename">app/static/app/formset_handlers.js</div>
<div class="highlight"><pre><span></span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;formset:added&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">$row</span><span class="p">,</span> <span class="nx">formsetName</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">formsetName</span> <span class="o">==</span> <span class="s1">&#39;author_set&#39;</span><span class="p">)</span> <span class="p">{</span>
            <span class="c1">// Do something</span>
        <span class="p">}</span>
    <span class="p">});</span>

    <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;formset:removed&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">$row</span><span class="p">,</span> <span class="nx">formsetName</span><span class="p">)</span> <span class="p">{</span>
        <span class="c1">// Row removed</span>
    <span class="p">});</span>
<span class="p">})(</span><span class="nx">django</span><span class="p">.</span><span class="nx">jQuery</span><span class="p">);</span>
</pre></div>
</div>
<p>Two points to keep in mind:</p>
<ul class="simple">
<li>The JavaScript code must go in a template block if you are inheriting
<code class="docutils literal notranslate"><span class="pre">admin/change_form.html</span></code> or it won’t be rendered in the final HTML.</li>
<li><code class="docutils literal notranslate"><span class="pre">{{</span> <span class="pre">block.super</span> <span class="pre">}}</span></code> is added because Django’s
<code class="docutils literal notranslate"><span class="pre">admin_change_form_document_ready</span></code> block contains JavaScript code to handle
various operations in the change form and we need that to be rendered too.</li>
</ul>
<p>Sometimes you’ll need to work with <code class="docutils literal notranslate"><span class="pre">jQuery</span></code> plugins that are not registered
in the <code class="docutils literal notranslate"><span class="pre">django.jQuery</span></code> namespace. To do that, simply change how the code
listens for events. Instead of wrapping the listener in the <code class="docutils literal notranslate"><span class="pre">django.jQuery</span></code>
namespace, just listen to the event triggered from there. For example:</p>
<div class="highlight-html+django notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">extends</span> <span class="s1">&#39;admin/change_form.html&#39;</span> <span class="cp">%}</span>
<span class="cp">{%</span> <span class="k">load</span> <span class="nv">static</span> <span class="cp">%}</span>

<span class="cp">{%</span> <span class="k">block</span> <span class="nv">admin_change_form_document_ready</span> <span class="cp">%}</span>
<span class="cp">{{</span> <span class="nb">block</span><span class="nv">.super</span> <span class="cp">}}</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">{%</span> <span class="k">static</span> <span class="s1">&#39;app/unregistered_handlers.js&#39;</span> <span class="cp">%}</span><span class="s">&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
</pre></div>
</div>
<div class="highlight-javascript snippet"><div class="snippet-filename">app/static/app/unregistered_handlers.js</div>
<div class="highlight"><pre><span></span><span class="nx">django</span><span class="p">.</span><span class="nx">jQuery</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;formset:added&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">$row</span><span class="p">,</span> <span class="nx">formsetName</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// Row added</span>
<span class="p">});</span>

<span class="nx">django</span><span class="p">.</span><span class="nx">jQuery</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;formset:removed&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">$row</span><span class="p">,</span> <span class="nx">formsetName</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// Row removed</span>
<span class="p">});</span>
</pre></div>
</div>
</div>
</div>


          </div>
        </div>
      </div>
      
        
          <div class="yui-b" id="sidebar">
            
      <div class="sphinxsidebar" role="navigation" aria-label="main navigation">
        <div class="sphinxsidebarwrapper">
  <h3><a href="../../../contents.html">Table of Contents</a></h3>
  <ul>
<li><a class="reference internal" href="#">JavaScript customizations in the admin</a><ul>
<li><a class="reference internal" href="#inline-form-events">Inline form events</a></li>
</ul>
</li>
</ul>

  <h4>Previous topic</h4>
  <p class="topless"><a href="admindocs.html"
                        title="previous chapter">The Django admin documentation generator</a></p>
  <h4>Next topic</h4>
  <p class="topless"><a href="../auth.html"
                        title="next chapter"><code class="docutils literal notranslate"><span class="pre">django.contrib.auth</span></code></a></p>
  <div role="note" aria-label="source link">
    <h3>This Page</h3>
    <ul class="this-page-menu">
      <li><a href="../../../_sources/ref/contrib/admin/javascript.txt"
            rel="nofollow">Show Source</a></li>
    </ul>
   </div>
<div id="searchbox" style="display: none" role="search">
  <h3>Quick search</h3>
    <div class="searchformwrapper">
    <form class="search" action="../../../search.html" method="get">
      <input type="text" name="q" />
      <input type="submit" value="Go" />
      <input type="hidden" name="check_keywords" value="yes" />
      <input type="hidden" name="area" value="default" />
    </form>
    </div>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
        </div>
      </div>
              <h3>Last update:</h3>
              <p class="topless">Jun 03, 2019</p>
          </div>
        
      
    </div>

    <div id="ft">
      <div class="nav">
    &laquo; <a href="admindocs.html" title="The Django admin documentation generator">previous</a>
     |
    <a href="../../index.html" title="API Reference" accesskey="U">up</a>
   |
    <a href="../auth.html" title="&lt;code class=&#34;docutils literal notranslate&#34;&gt;&lt;span class=&#34;pre&#34;&gt;django.contrib.auth&lt;/span&gt;&lt;/code&gt;">next</a> &raquo;</div>
    </div>
  </div>

      <div class="clearer"></div>
    </div>
  </body>
</html>